<template>
	<view class="container">
		<view class="img-upload">
			<view class="top-tips">
				*请拍摄/上传您本人的身份证件(图片限10M以内)
			</view>
			<view class="flex-space-between">
				<view class="img-upload-item">
					<view class="title">
						身份证人像面证件照
					</view>
					<view class="box-image" @click="chooseImg(1)">
						<image class="bg-image"
							:src="frontIDCardImage ? frontIDCardImage : require('@/common/images/identification/img-id-photo-png.png')"
							mode="aspectFill"></image>
						<view class="add">+</view>
						<view class="bottom">
							点击上传身份证人像面图片
						</view>
					</view>
				</view>
				<view class="img-upload-item">
					<view class="title">
						身份证国徽面证件照
					</view>
					<view class="box-image" @click="chooseImg(2)">
						<image class="bg-image"
							:src="backIDCardImage ? backIDCardImage : require('@/common/images/identification/img-national-emblem-png.png')"
							mode="aspectFill"></image>
						<view class="add">+</view>
						<view class="bottom">
							点击上传身份证国徽面图片
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="form">
			<view class="item">
				<text class="text">持卡人姓名：</text>
				<input class="input" placeholder="请输入持卡人姓名" v-model="form.accountName" type="text" />
			</view>
			<view class="item">
				<text class="text">持卡人身份证：</text>
				<input :disabled="(type == 'me' && form.identityCard)?true:false" class="input" placeholder="请输入持卡人身份证"
					v-model="form.identityCard" type="text" />
			</view>
			<view class="item">
				<text class="text">银行卡卡号：</text>
				<input class="input" placeholder="请输入银行卡卡号" v-model="form.accountNo" type="number" />
			</view>
			<view class="item">
				<text class="text">银行名称：</text>
				<input class="input" placeholder="请输入银行名称" v-model="form.bankName" type="text" />
			</view>
			<view class="item">
				<text class="text">银行预留手机号：</text>
				<input class="input" placeholder="请输入银行预留手机号" v-model="form.mobileNum" type="number" maxlength="11" />
			</view>
			<view class="item">
				<text class="text">验证码：</text>
				<input class="input" placeholder="请输入验证码" v-model="form.verifyCode" type="text" />
				<u-button style="margin-left: 10px" size="mini" type="warning" shape="circle" :disabled="disabled"
					@click="sms">{{ second == 0 ? '发送验证码' : second + '秒' }}</u-button>
			</view>
		</view>
		<view class="tips-box flex-column" v-if="type == 'noMe'">
			<text>温馨提示:</text>
			<text>添加他人结算卡，需填写本人结算卡手机号接收的验证短信。</text>
			<!-- <text>2.如果手机收不到验证码，请联系客服。</text> -->
		</view>
		<view class="next myBtn" @click="submitBtn">提交</view>
	</view>
</template>

<script>
	// idCardImgFrontPath   , idCardImgBackPath
	import uploadImgMixin from '@/mixins/uploadImg';
	import {
		sendVerifyCode
	} from '_a/sms';
	import {
		addSettle,
		editSettle,
		sendNoMeSMS,
		settlementAddOther
	} from '_a/myInfo';
	export default {
		mixins: [uploadImgMixin],
		data() {
			return {
				form: {
					identityCard: '',
					accountType: 0
				},
				second: 0,
				disabled: false,
				type: 'me', //me 本人 noMe 非本人
				isMe: true, //
				frontIDCardImage: "",
				backIDCardImage: "",
			};
		},
		computed: {
			// settlement() {
			// 	return this.$store.getters.userInfo.settlement || {};
			// }
		},
		onLoad(option) {
			this.type = option.type || 'me';
			let title;
			switch (this.type) {
				case 'me':
					let settlement = this.$storage.getStore('cardInfo') || {};
					console.log({
						settlement
					})
					this.form = settlement;
					if (this.form.id) {
						title = '修改结算卡';
						// 修改结算卡,赋值
					} else {
						title = '添加结算卡';
					}
					break;
				case 'noMe':
					title = '添加他人结算卡';

					break;
				default:
					break;
			}
			// this.form = this.settlement;
			uni.setNavigationBarTitle({
				title: title
			});
		},
		methods: {
			chooseImg(type) {
				let _this = this;
				let chooseImgtype = ['album', 'camera'];
				let otherParams = {}
				if (type == 9) {
					if (!_this.form.realName && !_this.form.identityCard) {
						return _this.$tip.toast('请先上传身份证照或者填写姓名和身份证号!');
					}
					chooseImgtype = ['camera'];
					otherParams = {
						realName: _this.form.realName,
						identityCard: _this.form.identityCard
					}
				}
				_this.$selectUpload.chooseImg(1, chooseImgtype).then(async res => {
					const size = res.tempFiles[0].size;
					// const pixelsValue = size < (1024*1024)?1500000:90000;
					// console.log({pixelsValue});
					_this.$tip.loading('上传中...');
					setTimeout(function() {
						_this.$tip.loaded();
					}, 10000);

					// h5要单独压缩
					// // #ifdef H5
					// if (size > (1024 * 1024*4)) {
					// 	base64 = await this.$refs.wCompress2.start(res.tempFilePaths[0], {
					// 		pixels: 90000, // 最大分辨率，默认二百万
					// 		quality: 0.8, // 压缩质量，默认0.8
					// 		type: 'png', // 图片类型，默认jpg
					// 		base64: true // 是否返回base64，默认false，非H5有效
					// 	});
					// } else {
					// 	base64 = await this.getBase64(res.tempFilePaths[0]);
					// }
					// // #endif
					// // #ifndef H5
					// base64 = await this.getBase64(res.tempFilePaths[0]);
					// // #endif
					// let base64;
					if (size > (1024 * 1024 * 10)) {
						return this.$tip.toast('上传图片不超过10M!');
					}
					// base64 = await this.getBase64(res.tempFilePaths[0]);
					// let ocrInfo = await this.ocrGetInfo(base64, `0${type}`, otherParams);
					const file = res.tempFilePaths[0];
					let ocrInfo = await this.uploadApiRequest(file, `0${type}`, otherParams);
					this.$tip.loaded();
					if (ocrInfo.code == 200) {
						this.$tip.toast('上传成功!', 'sccess');
						switch (type) {
							case 1:
								this.frontIDCardImage = ocrInfo.msg;
								break;
							case 2:
								this.backIDCardImage = ocrInfo.msg;
								break;

							default:
								break;
						}

					} else {
						_this.$tip.loaded();
						_this.$tip.toast(ocrInfo.msg);
					}
				}).catch(e => {
					console.log(e)
					_this.$tip.toast(e);
					_this.$tip.loaded();
				});
			},
			pickerConfirmHandle() {},
			// 短信倒计时
			sendCode() {
				// if (this.second >= 0) {
				//   clearInterval(this.t imeNo)
				//   return;
				// }
				this.second = 60;
				this.timeNo = setInterval(() => {
					this.second--;
					if (this.second <= 0) {
						clearInterval(this.timeNo);
						this.disabled = false;
					}
				}, 1000);
			},
			// 获取短信验证码
			sms() {
				if (this.disabled) {
					return;
				}
				if (!this.form.mobileNum) {
					this.$tip.toast('请输入银行预留手机号');
					return;
				}
				this.disabled = true;
				if (this.type == 'me') {
					//本人
					sendVerifyCode({
							phone: this.form.mobileNum
						})
						.then(res => {
							if (res.code === 200) {
								this.sendCode();
							} else {
								this.disabled = false;
							}
						})
						.catch(err => {
							this.disabled = false;
						});
				} else {
					//他人
					sendNoMeSMS()
						.then(res => {
							if (res.code === 200) {
								this.sendCode();
							} else {
								this.disabled = false;
							}
						})
						.catch(err => {
							this.disabled = false;
						});
				}
			},
			// 提交
			submitBtn() {
				if (!this.form.accountNo) {
					this.$tip.toast('请输入银行卡卡号');
					return;
				}
				if (!this.form.bankName) {
					this.$tip.toast('请输入银行名称');
					return;
				}
				if (!this.form.accountName) {
					this.$tip.toast('请输入持卡人姓名');
					return;
				}
				if (!this.form.identityCard) {
					this.$tip.toast('请输入持卡人身份证');
					return;
				}
				if (!this.form.mobileNum) {
					this.$tip.toast('请输入银行预留手机号');
					return;
				}
				if (!this.form.verifyCode) {
					this.$tip.toast('请输入验证码');
					return;
				}
				if (!this.frontIDCardImage) {
					return this.$tip.toast('请上传身份证正面');
				}
				if (!this.backIDCardImage) {
					return this.$tip.toast('请上传身份证反面');
				}
				this.$tip.loading('提交中....');
				if (!this.form.id) {
					//id不存在就是添加
					if (this.type == 'me') {
						// 自己结算卡添加
						let params = {
							...this.form,
							idCardImgFrontPath: this.frontIDCardImage,
							idCardImgBackPath: this.backIDCardImage
						}
						addSettle(params).then(res => {
							this.$tip.loaded();
							if (res.code == 200) {
								this.$store.dispatch('getUserDetail');
								this.$tip
									.modal({
										content: '认证成功!',
										showCancel: false
									})
									.then(() => {
										// 让上个页面重新获取数据
										this.$nav.goBack();
									});
							} else {
								this.$tip.modal({
									content: res.msg,
									showCancel: false
								});
							}
						});
					} else {

						// 他人结算卡添加
						let params = {
							...this.form,
							idCardImgFrontPath: this.frontIDCardImage,
							idCardImgBackPath: this.backIDCardImage
						}
						settlementAddOther(params).then(res => {
							this.$tip.loaded();
							if (res.code == 200) {
								this.$store.dispatch('getUserDetail');
								this.$tip
									.modal({
										content: '添加成功!',
										showCancel: false
									})
									.then(() => {
										// 让上个页面重新获取数据
										this.$nav.goBack();
									});
							} else {
								this.$tip.modal({
									content: res.msg,
									showCancel: false
								});
							}
						});
					}
				} else {
					let params = JSON.parse(JSON.stringify(this.form));
					delete params.identityCard;
					params.idCardImgFrontPath = this.frontIDCardImage
					params.idCardImgBackPath = this.backIDCardImage
					editSettle(params).then(res => {
						this.$tip.loaded();
						if (res.code == 200) {
							this.$store.dispatch('getUserDetail');
							this.$tip
								.modal({
									content: '修改成功!',
									showCancel: false
								})
								.then(() => {
									// 让上个页面重新获取数据
									this.$nav.goBack();
								});
						} else {
							this.$tip.modal({
								content: res.msg,
								showCancel: false
							});
						}
					});
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		padding: 20upx 0;
	}

	.img-upload {
		background: #fff;
		padding: 30upx 0;
	}

	.box {
		.item {
			.img {
				width: 210upx;
				height: 165upx;
			}

			.tips {
				margin-top: 30upx;
				font-size: 26upx;
				font-weight: 400;
				color: #4d4d4d;
			}
		}
	}

	.setMargin {
		margin-left: 134upx;
	}

	.one-box {
		// margin-top: 50upx;
	}

	.sub-tips {
		padding: 28upx 30upx;
		font-size: 26upx;
		font-weight: 400;
		color: #999999;
	}

	.form {
		background: #fff;

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 25upx 20upx;
			font-size: 28upx;
			font-weight: 400;
			color: #262626;

			.input {
				flex: 1;
				text-align: right;
				margin-left: auto;
				font-size: 28upx;
				color: #7d7d7d;
			}
		}
	}

	.next {
		margin: 60upx auto 0;
		width: 581upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		background: $button-linear-bg;
		border: 1upx solid $themeColor;
		border-radius: 10upx;
		font-size: 30upx;
		font-weight: 400;
		color: #ffffff;
	}

	.tips-box {
		margin-top: 36upx;
		font-size: 28upx;
		padding-left: 40upx;
		font-weight: 400;
		color: #ff0000;
	}

	.img-upload {
		background-color: #ffffff;
		padding: R(30px);
		padding-top: 0;

		.top-tips {
			text-align: left;
			font-size: R(20px);
			color: #C7C7C7;
			padding-top: R(40px);
		}

		.img-upload-item {

			.title {
				color: #1E1E20;
				font-size: R(22px);
				font-weight: 500;
				margin: R(20px) R(30px);
				position: relative;
			}

			.title::before {
				content: "";
				position: absolute;
				display: block;
				left: R(-20px);
				width: R(10px);
				height: R(10px);
				background-color: #1E1E20;
				border-radius: R(50%);
				margin-top: R(10px);
			}

			.box-image {
				// background-color: #DFDFE8;
				border-radius: R(10px);
				padding: R(35px) R(55px);
				width: R(338px);
				border: 1px dotted #c7c7c7;
				// height: R(250px);
				margin: 0 auto;
				position: relative;

				.bg-image {
					width: R(227px);
					height: R(116px);
				}

				.add {
					width: R(50px);
					height: R(50px);
					background-color: #3BC3FF;
					border-radius: 50%;
					text-align: center;
					font-size: R(50);
					line-height: R(45px);
					color: #ffffff;
					position: absolute;
					top: 50%;
					left: 50%; //居中
					margin-left: R(-30px);
					margin-top: R(-30px);
				}

				.bottom {
					font-size: R(15px);
					color: #C7C7C7;
					margin-top: R(20px);
				}
			}
		}


		.tips {
			text-align: center;
			margin: R(30px);
			font-size: R(25px);
			color: #1E1E20;
			font-weight: 400;
		}
	}
</style>